<template>
	<view>
		<o-swiper :height="750" mode="none" @animationfinish="animationfinish" :list="goods_info?.ba_list">
			<template #dot>
				<view class="radius-26 swiper_b_box display align-items fontSize-26">
					<view class="radius-26 pad-lr-12 pad-tb-4" :class="current==0?'bgfff col-3':''" v-if="goods_info?.video">视频</view>
					<view class="radius-26 pad-lr-12 pad-tb-4" :class="current>0?'bgfff col-3':''">图片{{(goods_info?.video)?current:current+1}}/{{(goods_info?.video)?(goods_info?.ba_list?.length-1):(goods_info?.ba_list?.length)}}
					</view>
				</view>
			</template>
		</o-swiper>
		<view class="pad-lr-20 bgfff">
			<view class="display-sb align-items pad-tb-24">
				<view class="fontSize-32 fontBold col-E23737"><text class="fontSize-24">￥</text>{{goods_info?.price}}</view>
				<view class="display align-items">
					<view class="fontSize-28 col-6">{{goods_info?.all_sales>999?'999+':goods_info?.all_sales}}人已购</view>
					<view class="display align-items ml40" @click="cklicklike(is_like)">
						<image src="/static/img/icon_normal_dianzan.png" class="proudct-item-icon-24" mode="" v-show="is_like==0"></image>
						<image src="/static/img/icon_select_dianzan.png" class="proudct-item-icon-24" mode="" v-show="is_like>0"></image>
						<view class="ml12 fontSize-28 col-6">{{like_nums}}</view>
					</view>
				</view>
			</view>
			<view class="fontSize-32">
				<text class="col-f tag_view radius-4 fontSize-22" :style="'background:'+goods_info?.label_array?.color">{{goods_info?.label_array?.name}}</text>
				<!-- <text class="col-f tag_view_two radius-4 fontSize-22">利润</text> -->
				{{goods_info?.name}}
			</view>
			<view class="mar-top-30 pad-tb-30 display-sb align-items border_top_F1 fontSize-28">
				<view class="col-6">商品属性</view>
				<view class="">{{buy_type}}</view>
			</view>
			<view class=" pad-tb-30 display-sb align-items border_top_F1 fontSize-28" @click="()=>{richshow=true,richshowtxt=goods_info?.freight_city}">
				<view class="col-6">运费</view>
				<view class="">{{goods_info?.freight_name}}</view>
			</view>
			<view class=" pad-tb-30 display-sb align-items border_top_F1 fontSize-28" @click="()=>{richshow=true,richshowtxt=goods_info?.notsend_city}">
				<view class="col-6">未开放区域</view>
				<view class="">{{goods_info?.notsend_name}}</view>
			</view>
		</view>
		<view class="mar-top-20 bgfff pad-lr-20 pad-tb-20">
			<view class="fontSize-30">商品介绍</view>
			<tm-html :content="goods_info?.content"></tm-html>
		</view>
		<view class="mar-top-20 pad-lr-20 pad-tb-20 bgfff">
			<view class="">评价</view>
			<view class="pad-tb-30 border_bottom_F1" v-for="item in eva_list" :key="item.id">
				<view class="display-sb align-items">
					<view class="display align-items">
						<image :src="item.avatar" class="border-50 proudct-item-icon-31" mode=""></image>
						<view class="ml20 fontSize-28">
							<view class="">{{item.nickname}}</view>
							<view class="mar-top-8">
								<uni-rate :size="20" allowHalf activeColor="#F6911B" v-model="item.star" readonly />
							</view>
						</view>
					</view>
					<view class="fontSize-24 col-9">{{item.create_time}} 发布</view>
				</view>
				<view class="mar-top-20 fontSize-26 col-6">{{item.content}}</view>
				<view class="display align-items flex-wrap">
					<view class="text-align-center width-25" v-for="itemx in item.images">
					<image :src="itemx" class="wid-hig-164 radius-8" mode="" @click="seeimage(item.images,itemx)"></image>
					</view>
				</view>
			</view>
			<!-- <view class="text-align-center fontSize-28" v-show="eva_list?.length>0">
				查看全部
			</view> -->
		</view>
		<view class="poFi bottom-0 width-100 bgfff">
			<view class="pad-lr-20 display-sb align-items bottom_view">
				<view class="display align-items">
					<tm-badge :count="cart_count" :maxCount="99" color="red" linear="top" right="-10" fontSize="16">
						<view class="text-align-center poRe line-30" @click="gocar">
							<image src="/static/img/icon_gouwuche.png" class="proudct-item-icon-25" mode=""></image>
							<view class="fontSize-24">购物车</view>
							<!-- <view class="poAb col-f fontSize-16 car_num radius-16" v-if="cart_count>0">{{cart_count}}</view> -->
						</view>
					</tm-badge>
					<button class="text-align-center ml20 line-30" open-type="contact">
						<image src="/static/img/icon_kefu.png" class="proudct-item-icon-25" mode=""></image>
						<view class="fontSize-24">客服</view>
					</button>
					<view class="text-align-center ml30 line-30" @click="cklickcollect">
						<image src="/static/img/icon_normal_shoucang.png" class="proudct-item-icon-25" mode="" v-show="is_collect==0"></image>
						<image src="/static/img/icon_select_shoucang.png" class="proudct-item-icon-25" mode="" v-show="is_collect>0"></image>
						<view class="fontSize-24">收藏</view>
					</view>
				</view>
				<view class=" display align-items">
					<view class="col-f fontSize-32 text-align-center pad-tb-16 radius-40 ml20 add_car" @click.stop="openshow(1)">加入购物车</view>
					<view class="col-f fontSize-32 text-align-center pad-tb-16 radius-40 ml20 buy_car" @click.stop="openshow(2)">立即购买</view>
				</view>
			</view>
		</view>
		<!-- 规格选择弹窗 -->
		<tm-drawer v-model:show="show" placement="bottom" :height="800" hideHeader @close="closeshow">
		        <view class="pad-tblr-32 popup">
		            <view class="display mar-top-30">
		            	<view class="left_img">
							<image :src="goods_info?.images[0]" class="width-100 height-100 border-8" mode="aspectFill"></image>
		            	</view>
						<view class="right_txt ml20">
							<view class="fontSize-28">{{goods_info?.name}}</view>
							<view class="mar-top-8 col-D92129 fontSize-30" v-if="chooseInfo?.attr_price||sku_list?.length==0">￥{{chooseInfo?.attr_price||goods_info?.price}}</view>
							<view class="fontSize-24 col-6 mar-top-12" v-if="chooseInfo?.attr_stock||sku_list?.length==0">剩余库存{{chooseInfo?.attr_stock||goods_info?.stock}}件</view>
						</view>
		            </view>
					<view class="minheight">
					<view class="mar-top-40 " v-for="(item,index) in sku_attr">
						<view class="fontSize-28">{{item.attr_name}}</view>
						<view class="display align-items flex-wrap">
							<view class="value col-9 bgf6 fontSize-26 pad-lr-50 pad-tb-12 radius-30 mar-top-24" v-for="(item1,index1) in item.spec" @click="item1.isShow ?ruleChoose(item1.id,index):''" 
							 :class="[chooseSku[index] == item1.id ?'active':'',item1.isShow?'':'active1']">{{item1.name}}</view>
						</view>
					</view>
					</view>
					<view class="display-sb align-items mar-top-40">
						<view class="fontSize-28">购买数量 </view>
						<view class="bujinqi">
						<tm-stepper width="150"  :defaultValue="num"  @change="changeste" :max="chooseInfo?.attr_stock||goods_info?.stock"  :min="0"></tm-stepper>
						</view>
					</view>
					<view class="mar-top-50">
						<view class="text-align-center col-f fontSize-32 radius-40 add_b-box" @click="addcar" v-if="is_btn==1">
							加入购物车
						</view>
						<view class="text-align-center col-f fontSize-32 radius-40 add_b-box" @click="gosetorder" v-if="is_btn==2">
							下一步
						</view>
						<view class="text-align-center col-f fontSize-32 radius-40 add_b-box" @click="cklickcollect" v-if="is_btn==3">
							收藏
						</view>
					</view>
		        </view>
		</tm-drawer>
		<tm-overlay v-model:show="richshow" contentAnimation>
			<view @click.stop="" class="bgfff radius-16 pad-lr-30 pad-tb-30 width-80" style="height: 600rpx;overflow-y: scroll;">
				<view class="">{{richshowtxt}}</view>
			</view>
		</tm-overlay>
	</view>
</template>

<script lang="ts" setup>
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';
// import {goods_spec,goods_val,do_collect,cancel_like,do_like,add_cart,cancel_collect} from '../../utils/api'
onLoad((options)=>{
	id.value = options.id
})
onShow(()=>{
	_goods_val()
	_goods_spec()
})
const id = ref()//商品id
//商品详情
const richshow = ref(false)
const richshowtxt = ref()
const goods_info = ref()//商品信息
const eva_list = ref()//评价列表
const is_like = ref()//是否点赞,0未点赞,大于0已点赞
const is_collect = ref()//是否收藏 ,0未收藏 ,大于0已收藏
const cart_count = ref()//购物车所有 商品总数量
const like_nums = ref()//点赞人数
const buy_type = ref()//商品属性
const _goods_val =() =>{
	goods_val({goods_id:id.value}).then(res=>{
		if(res.code==1){
			res.data.goods_val.ba_list = []
			if(res.data.goods_val.video){
				res.data.goods_val.ba_list.push({type:'video',src:res.data.goods_val.video,currentTime:0,poster:res.data.goods_val.images[0]})
				res.data.goods_val.images.forEach(item=>{
					res.data.goods_val.ba_list.push({type:'image',src:item})
				})
			}else{
				res.data.goods_val.images.forEach(item=>{
					res.data.goods_val.ba_list.push({type:'image',src:item})
				})
			}
			console.log(res.data.goods_val)
			goods_info.value = res.data.goods_val
			eva_list.value = res.data.eva_list
			is_like.value = res.data.is_like
			is_collect.value = res.data.is_collect
			cart_count.value = res.data.cart_count
			like_nums.value = res.data.like_nums
			buy_type.value = res.data.buy_type
		}
	})
}
//规格列表
const sku_attr = ref()//规格列表
const chooseSku = ref([])//规格组合列表
const sku_list = ref()
const _goods_spec =() =>{
	goods_spec({goods_id:id.value}).then(res=>{
		if(res.code==1){
			if(res.data.spec_list.length==1){
				res.data.sku_list.forEach(item=>{
					res.data.spec_list.forEach(itemx=>{
						itemx.spec.forEach(item1=>{
							if(item.attr_id == item1.id){
								if(item.attr_stock>0){
									item1.isShow = true
								}else{
									item1.isShow = false
								}
							}
						})
					})
				})
			}else{
				res.data.spec_list.forEach(item=>{
					item.spec.forEach(item1=>{
						item1.isShow = true
					})
				})
			}
			sku_attr.value = res.data.spec_list
			sku_list.value = res.data.sku_list
		}
	})
}
const current = ref(0)
const num = ref(1)//购买数量
const animationfinish = (e) => {
	console.log(e)
	current.value = e.detail.current
}
const changeste =(e) =>{
	console.log(e)
	num.value = e.toString().replace(/^0+/, '')
}
const chooseInfo = ref({
	attr_stock:0
})
const show = ref(false)//规则选择弹窗
	const ruleChoose = (id: string , indexvalue: number) => {
			sku_attr.value.forEach((item2,index2)=>{
				item2.spec.map((item3)=>{
					// if(indexvalue!=index2){
						item3.isShow = true
						
					// }
				})
			})
		if(chooseSku.value[indexvalue]){
			if(chooseSku.value[indexvalue] == id){
				chooseSku.value[indexvalue] = ''
			}else{
				chooseSku.value[indexvalue] = id
			}
		}else{
			chooseSku.value[indexvalue] = id
		}
		sku_list.value.forEach((item,index)=>{
				if(item.attr_stock==0){
					if(chooseSku.value.includes(id)){
						item.attr_id.split('|').forEach((item1,index1)=>{
							if(id!=item1){
								sku_attr.value.forEach(item2=>{
									item2.spec.map(item3=>{
										if(item1==item3.id){
											item3.isShow = false
										}
									})
								})
							}
						})
						
					}
					
				}
		})
		sku_list.value.forEach(item=>{
			if(item.attr_id==([...chooseSku.value].sort((a, b) => a - b).join('|'))){
				console.log(item,88)
				chooseInfo.value = item
				 throw new Error('结束循环')
			}else{
				chooseInfo.value = ''
			}
		})
	}
//关闭规格弹窗
const closeshow =() =>{
	chooseInfo.value = {attr_stock:0}
	chooseSku.value = []
}
//收藏
const cklickcollect =() =>{
	if(is_collect.value==0){
		if(!chooseInfo.value.id&&sku_list.value.length>0){
			is_btn.value = 3
			show.value = true
			return
		}
		do_collect({goods_id:id.value,attr_unique:chooseInfo.value.id||''}).then(res=>{
			uni.showToast({
				title:res.msg,
				icon:'none'
			})
			if(res.code==1){
				is_collect.value=1
				show.value = false
			}
		})
	}else{
		cancel_collect({goods_id:id.value}).then(res=>{
			uni.showToast({
				title:res.msg,
				icon:'none'
			})
			if(res.code==1){
				is_collect.value=0
			}
		})
	}
}
//点赞
const cklicklike  =(type:number) =>{
	if(type>0){
		cancel_like({goods_id:id.value}).then(res=>{
			uni.showToast({
				title:res.msg,
				icon:'none'
			})
			if(res.code==1){
				is_like.value=0
				like_nums.value--
			}
		})
	}else{
		do_like({goods_id:id.value}).then(res=>{
			uni.showToast({
				title:res.msg,
				icon:'none'
			})
			if(res.code==1){
				is_like.value=1
				like_nums.value++
			}
		})
	}
}
//查看图片
const seeimage =(imgs,img:string) =>{
	uni.previewImage({
		current:img,
		urls:imgs,
	})
}
//打开规格弹窗
const is_btn = ref()
const openshow =(type:number) =>{
	if(goods_info.value.is_shelves!=1){
		uni.showToast({
			title:'商品已下架，无法购买',
			icon:'none'
		})
		return
	}
	is_btn.value = type
	show.value = true
}
//加入购物车
const addcar =() =>{
	if(!chooseInfo.value.id&&sku_list.value.length>0){
		uni.showToast({
			title:'请选择规格',
			icon:'none'
		})
		return
	}
	if(num.value==0){
		uni.showToast({
			title:'请填写数量',
			icon:'none'
		})
		return
	}
	if(sku_list.value.length==0){
		if(goods_info.value.stock<num.value){
			uni.showToast({
				title:'库存不足',
				icon:'none'
			})
			return	
		}
	}else{
		if((chooseInfo.value?.attr_stock<num.value)){
			uni.showToast({
				title:'库存不足',
				icon:'none'
			})
			return
		}
	}
	add_cart({goods_id:id.value,attr_id:chooseInfo.value.id,num:num.value}).then(res=>{
		uni.showToast({
			title:res.msg,
			icon:'none'
		})
		if(res.code==1){
			show.value= false
			cart_count.value++
		}
	})
}
//下单
const gosetorder =() =>{
	if(!chooseInfo.value.id&&sku_list.value.length>0){
		uni.showToast({
			title:'请选择规格',
			icon:'none'
		})
		return
	}
	if(num.value==0){
		uni.showToast({
			title:'请填写数量',
			icon:'none'
		})
		return
	}
	if(sku_list.value.length==0){
		if(goods_info.value.stock<num.value){			
		uni.showToast({
			title:'库存不足',
			icon:'none'
		})
		return
		}
	}else{
		if((chooseInfo.value?.attr_stock<num.value)){
			uni.showToast({
				title:'库存不足',
				icon:'none'
			})
			return
		}
	}
	let Obj = {
		goods_id:id.value,
		attr_id:chooseInfo.value.id,
		num:num.value
	}
	uni.navigateTo({
		url:'/indexpages/setorder/setorder?type=1&obj='+JSON.stringify(Obj)
	})
}
const gocar =() =>{
	uni.switchTab({
		url:'/pages/car/car'
	})
}
</script>

<style lang="scss">
	@import 'goodsdetails.scss';
</style>